<template>
  <view class="viewport">
    <view class="content">
      <image src="/static/images/login/logo@2x.png" mode="aspectFill" class="logo-icon"></image>
      <view class="login-box">
        <view class="login-title">Login</view>
        <view class="login-tips">Please enter your e-mail and password.</view>
        <form @submit="formSubmit">
          <view class="input-box">
            <image
              src="/static/images/login/email@2x.png"
              mode="aspectFill"
              class="input-icon"
            ></image>
            <input
              class="input"
              @input="onInput"
              @blur="onBlur"
              data-name="email"
              :value="form.email"
              name="email"
              placeholder="Email"
            />
          </view>
          <view class="input-box">
            <image :src="pic" mode="aspectFill" class="input-icon"></image>
            <input
              class="input"
              :password="password"
              data-name="password"
              :value="form.password"
              name="password"
              placeholder="Password"
              @input="onInput"
              @blur="onBlur"
              maxlength="20"
            />
            <image
              class="close-eye-icon"
              @click="changeStatus"
              src="/static/images/login/biyan@2x.png"
              mode="aspectFill"
              v-if="password"
            >
            </image>
            <image
              class="open-eye-icon"
              @click="changeStatus"
              src="/static/images/login/zhengyan@2x.png"
              mode="aspectFill"
              v-else
            ></image>
            <view class="forgot-btn" @click="jumpResetPsw">Forgot？</view>
          </view>
          <button class="submit-btn unactive" v-if="!form.email || !form.password">Sign in</button>
          <button class="submit-btn" form-type="submit" v-else>Sign in</button>
        </form>
      </view>
    </view>
    <view class="foot">
      <view class="foot-desc">Don‘t have an account?</view>
      <view @click="jumpRegister" class="btn">Create one</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { postLoginAPI } from '@/services/user'
import { useMemberStore } from '@/stores'
const pic = ref('/static/images/login/mima@2x.png')
const password = ref(true)
const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
const form = ref({
  email: '',
  password: '',
})
const formSubmit = (e) => {
  const { email, password } = e.detail.value
  console.log(email, password)
  if (!reg.test(email))
    return uni.showToast({
      title: 'Please enter the correct email address',
      icon: 'none',
    })
  if (password.length < 6) {
    uni.showToast({
      title: 'Please enter a password of at least 6 characters',
      icon: 'none',
    })
    pic.value = '/static/images/login/hongsuo@2x.png'
  }
  if (password.length < 6) return
  postLoginAPI({
    account: email,
    password,
  })
    .then((res) => {
      console.log(res)
      const { code, data, msg } = res

      if (code == 200) {
        const { user } = data
        const profile = {
          id: user.id,
          avatar: user.avatar,
          token: data.token.token,
          email: user.email,
          firstName: user.firstName,
          lastName: user.lastName,
        }
        const memberStore = useMemberStore()
        memberStore.setProfile(profile)
        uni.switchTab({
          url: '/pages/index/index',
        })
      } else {
        pic.value = '/static/images/login/hongsuo@2x.png'
        uni.showToast({
          title: msg,
          icon: 'none',
        })
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
const onBlur = (e) => {
  console.log(e)
  const { name } = e.target.dataset
  if (name == 'email') {
    const emailVal = e.detail.value

    console.log(reg.test(emailVal), emailVal)
    if (!reg.test(emailVal)) {
      uni.showToast({
        title: 'Please enter the correct email address',
        icon: 'none',
      })
    }
  } else {
    const psd = e.detail.value
    if (psd.length < 6) {
      pic.value = '/static/images/login/hongsuo@2x.png'
      uni.showToast({
        title: 'Please enter a password of at least 6 characters',
        icon: 'none',
      })
    }
  }
}
const onInput = (e) => {
  const { name } = e.target.dataset
  if (name == 'password' && pic.value === '/static/images/login/hongsuo@2x.png') {
    pic.value = '/static/images/login/mima@2x.png'
  }
  form.value[name] = e.detail.value
}
const changeStatus = () => {
  password.value = !password.value
}
const jumpRegister = () => {
  uni.navigateTo({
    url: '/pages/register/register',
  })
}
const jumpResetPsw = () => {
  uni.navigateTo({
    url: '/pages/resetPassword/resetPassword',
  })
}
</script>

<style lang="scss" scoped>
.viewport {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(50px);

  .content {
    height: 90vh;

    .logo-icon {
      width: 70rpx;
      height: 70rpx;
      margin-top: 120rpx;
      margin-left: 65rpx;
    }

    .login-box {
      margin: 140rpx 65rpx 0;

      .login-title {
        font-family: HarmonyOS_Sans_SC_Bold;
        font-size: 58rpx;
        font-weight: bold;
        color: #000000;
        line-height: 82rpx;
        margin-bottom: 22rpx;
      }

      .login-tips {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
        line-height: 45rpx;
        margin-bottom: 90rpx;
      }

      .input-box {
        display: flex;
        align-items: center;
        margin-bottom: 62rpx;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #ddd;

        .input {
          flex: auto;
        }

        .input-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
        }

        .close-eye-icon,
        .open-eye-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }

        .forgot-btn {
          font-weight: 400;
          font-size: 26rpx;
          color: #000000;
          line-height: 37rpx;
        }
      }

      .submit-btn {
        background: linear-gradient(270deg, #5b5ef0 0%, #9e67fa 100%);
        border-radius: 47rpx;
        color: #fff;

        &.unactive {
          background: rgba(0, 0, 0, 0.05);
          color: rgba(0, 0, 0, 0.2);
          font-weight: bold;
        }
      }
    }
  }

  .foot {
    display: flex;
    justify-content: center;
    align-items: center;

    .foot-desc {
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.4);
      line-height: 40rpx;
      margin-right: 22rpx;
    }

    .btn {
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-decoration-line: underline;
    }
  }
}
</style>
